{% assign data = section.settings %}
{% capture container %}
{%- if data.is_fill -%}
    full_container_wrapper
{%- else -%}
    container_wrapper
{%- endif -%}
{% endcapture %}

{% assign blockId = block_id | default: section.block_id %}

{% if data.collection.id %}
  {% get_collection collections_id={data.collection.id} %}
  {% assign collection = collection %}
{% endif %}
<div class="block_collection_slides">
  <div class="{{ container }} public_swiper_nav_button">
    {% assign more_href = '/collections/' | append: collection.handle %}
    {% include 'title',title: data.title,detail: data.detail,class: 'title_line',more_text: data.more_text,more_href: more_href %}
    <div class="content md:flex items-center anime_content show public_swiper_nav_button relative">
      {% include 'swiper_btn', id: blockId, type: 'prev', showBtn: showBtn %}
      <div class="swiper overflow-hidden" id="swiper-{{ blockId }}">
        <ul class="swiper-wrapper">
          {% if data.collection.id != '' %}
            {% get_products collection_id = {data.collection.id} limit = { data.product_number } %}
            {% for product in products %}
              <li class="swiper-slide">
                {% include 'collection_product', product: product, collection_handle: collection.handle %}
              </li>
            {% endfor %}
          {% else %}
            {% for i in (1..6) %}
              <li class="swiper-slide">
                {% include 'collection_product' %}
              </li>
            {% endfor %}
          {% endif %}
        </ul>
      </div>
      <div class="swiper-button-prev" id="swiper-button-prev-{{ blockId }}">
        <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M 7.75 1.34375 L 6.25 2.65625 L 14.65625 12 L 6.25 21.34375 L 7.75 22.65625 L 16.75 12.65625 L 17.34375 12 L 16.75 11.34375 Z"></path>
        </svg>
      </div>
      <div class="swiper-button-next" id="swiper-button-next-{{ blockId }}">
        <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M 7.75 1.34375 L 6.25 2.65625 L 14.65625 12 L 6.25 21.34375 L 7.75 22.65625 L 16.75 12.65625 L 17.34375 12 L 16.75 11.34375 Z"></path>
        </svg>
      </div>
      <div class="swiper-pagination relative mt-[30px] md:hidden block" id="swiper-pagination-{{ blockId }}"></div>
    </div>
  </div>
</div>

<script>
  $(function () {
    let swiper = new Swiper('#swiper-{{ blockId }}', {
      slidesPerView: '{{ data.pc_number }}',
      spaceBetween: 30,
      loop: true,
      navigation: {
        nextEl: '#swiper-button-next-{{ blockId }}',
        prevEl: '#swiper-button-prev-{{ blockId }}',
      },
      pagination: {
        el: '#swiper-pagination-{{ blockId }}',
        clickable: true,
      },
      breakpoints: {
        768: {
          slidesPerView: '{{ data.wap_number }}',
          spaceBetween: 15,
        },
      },
    });
  });
</script>

{% schema %}
{
  "tag": "",
  "class": "block_collection_slides",
  "is_global": false,
  "name": {
    "zh_CN": "商品轮播",
    "en_US": "Product Carousel"
  },
  "max_blocks": "20",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置",
        "en_US": "set up"
      }
    },
    {
      "type": "card_collection",
      "label": {
        "zh_CN": "专辑",
        "en_US": "album"
      },
      "default": {
        "id": "",
        "title": ""
      },
      "id": "collection"
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题",
        "en_US": "Title"
      },
      "id": "title",
      "default": "New Arrivals"
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "简短描述",
        "en_US": "short description"
      },
      "id": "detail",
      "default": "bottom_center"
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "宽度铺满",
        "en_US": "full width"
      },
      "id": "is_fill"
    },
    {
      "type": "card_input_number",
      "label": {
        "zh_CN": "产品总数量",
        "en_US": "Total product quantity"
      },
      "max": 1000,
      "min": 1,
      "id": "product_number",
      "default": 8
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "PC每排数量",
        "en_US": "PC number per row"
      },
      "id": "pc_number",
      "max": "5",
      "min": "3",
      "default": "3"
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "移动端每排数量",
        "en_US": "Number of mobile terminals per row"
      },
      "id": "wap_number",
      "max": "2",
      "min": "1"
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "查看更多文案",
        "en_US": "See more copywriting"
      },
      "id": "more_text"
    }
  ],
  "blocks": [],
  "default": {
    "settings": {
      "collection": {
        "id": "",
        "title": ""
      },
      "title": "Collection Slides",
      "detail": "",
      "is_fill": false,
      "product_number": "8",
      "pc_number": "4",
      "wap_number": "2",
      "more_text": "View More"
    },
    "blocks": []
  },
  "icon": "icon-shangpinlunbo"
}
{% endschema %}
